<template>
  <div>
    <el-form-item :rules="textRule" :prop="props.field"></el-form-item>
    <div class="ele-newspaper-box">
      <!-- 版次列表 -->
      <draggable :list="newspapers" animation="180" class="drag-container" item-key="url" drag-class="drag-class" :force-fallback="true" handle=".drag-btn">
        <template #item="{ element, index }">
          <div class="ele-newspaper-item">
            <div class="inner-newspaper-item">
              <div class="img-box">
                <img :src="element.url" alt="" />
                <div v-if="element.fileUrl" class="pdf-tag">
                  <i class="iconfont">&#xe740;</i>
                  <span>PDF</span>
                </div>
              </div>
              <div class="message-box">
                <el-input v-model="element.title" size="large"></el-input>
                <div class="message-box-bottom">
                  <p>已添加文章：{{ element.article.length ? element.article.filter(item => item.title).length : 0 }}</p>
                  <div class="newspaper-item-options">
                    <div class="drag-btn">
                      <i class="iconfont">&#xe689;</i>
                    </div>
                    <el-button @click="handleEditNews(element, index)">
                      <i class="iconfont">&#xe678;</i>
                      版次文章
                    </el-button>
                    <el-button @click="handleDeleteNews(element, index)">
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </draggable>
      <!-- 添加按钮 -->
      <div class="ele-newspaper-item add-newspaper-item">
        <div class="no-data add-btn" @click="handleAddNews('image')">
          <i class="iconfont">&#xe609;</i>
          <p>图片添加</p>
        </div>
        <div class="no-data add-btn" @click="handleAddNews('pdf')">
          <i class="iconfont">&#xe740;</i>
          <p>PDF添加</p>
        </div>
      </div>
      <!-- 版次区域划分与文章列表 -->
      <el-dialog v-model="showNewsEditor" title="版次文章" width="1200px" align-center class="news-editor" @close="handleCloseNewsEditor">
        <div class="news-editor-content">
          <div class="news-img-box">
            <div ref="imageRef" class="inner-news-img-box">
              <img :src="currentNews?.url" alt="" />
              <div v-if="canDraw" class="canvas-box" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
                <canvas ref="canvasRef" class="canvas"></canvas>
              </div>
              <div v-else class="draggable-box">
                <vue-draggable-resizable
                  :x="currentArea.left"
                  :y="currentArea.top"
                  :w="currentArea.width"
                  :h="currentArea.height"
                  :parent="true"
                  @dragstop="handleDragStop"
                  @resizestop="handleResizeStop"
                  :minHeight="60"
                  :minWidth="90"
                  :z="5"
                  class-name="draggable-class"
                >
                  <div class="inner-drag">
                    <el-button @click="handleConfirmDrag" type="primary" :icon="Select" size="small"></el-button>
                    <el-button @click="handleCancelDrag" type="primary" :icon="CloseBold" size="small"></el-button>
                  </div>
                </vue-draggable-resizable>
              </div>
              <div class="article-list">
                <div
                  class="article-item"
                  v-for="(item, index) in currentArticles"
                  :key="index"
                  :style="{ left: item.coord.x + 'px', top: item.coord.y + 'px', width: item.coord.w + 'px', height: item.coord.h + 'px' }"
                >
                  <div class="article-box">
                    <div class="article-option-btn">
                      <el-button type="info" :icon="Delete" size="small" style="margin-left: 4px" @click="handleDeleteArea(index)"></el-button>
                      <el-button v-show="item.title" type="primary" :icon="Edit" size="small" style="margin-left: 4px" @click="handleEditArticle(item)"></el-button>
                    </div>
                    <div class="article-add-btn article-content" v-show="!item.title">
                      <el-button type="primary" size="small" @click="handleAddArticle(index)">添加文章</el-button>
                    </div>
                    <div class="article-content" v-show="item.title">
                      <p>{{ item.title }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="news-message-box">
            <p style="margin-bottom: 10px; color: #2b2c2e">版次名称</p>
            <el-input v-model="currentNews.title" placeholder="请填写版次名称"></el-input>
            <div class="article-list-header">
              <p>文章</p>
              <div style="display: flex; align-items: center; gap: 20px;">
                <div v-if="currentNews.fileUrl" class="pdf-info" @click="handlePreviewPdf(currentNews)">
                  <i class="iconfont">&#xe740;</i>
                  <span>PDF预览</span>
                </div>
                <p>已添加文章：{{ currentNewsArticles.length }}</p>
              </div>
            </div>
            <div class="article-list-box" v-loading="articleListLoading">
              <div v-if="currentNewsArticles.length > 0" class="inner-article-list-box">
                <draggable :list="currentNewsArticles" animation="180" class="drag-container" item-key="id" drag-class="drag-class" :force-fallback="true" handle=".drag-btn">
                  <template #item="{ element }">
                    <div class="article-item">
                      <p>{{ element.title }}</p>
                      <span>{{ element.update_time }}</span>
                      <div class="article-btn-box">
                        <el-button class="drag-btn" type="primary" text>
                          <i class="iconfont" style="font-size: 24px">&#xe689;</i>
                        </el-button>
                        <el-button type="primary" text :icon="Edit" @click="handleEditArticle(element)"></el-button>
                        <el-button type="primary" text :icon="Delete" @click="handleDeleteArticle(element)"></el-button>
                      </div>
                    </div>
                  </template>
                </draggable>
              </div>
              <div v-else class="no-data">
                <i class="iconfont">&#xe6b2;</i>
                <p>从左侧图片中框选范围，并添加文章</p>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="confirmNewsEdit">确认</el-button>
            <el-button @click="showNewsEditor = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 版次文章添加与编辑 -->
      <el-dialog v-model="isShowArticleEdit" :title="isEdit ? '修改文章' : '添加文章'" width="840px" align-center @close="resetForm" :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="article-edit-content">
          <!-- 外部媒体编辑  组件插入 -->
          <div class="push-without-edit">
            <!-- 使用投递组件 -->
            <ArticlePublishEdit :articlesAdd="[articleForm]" ref="publishDataRef" />
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" :loading="submitLoading" @click="handleSubmitArticle()">确认</el-button>
            <el-button @click="isShowArticleEdit = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- <ImageUpload v-model:showDialog="showNewsImgUpload" :limit="1" @getImage="insertImage" :isToJpg="true"></ImageUpload>
    <FilesUpload v-model:showDialog="showNewsFileUpload" :limit="1" allow="pdf" @getFileList="handleGetFiles"></FilesUpload> -->
    <FilesUpload v-if="showNewsImgUpload" v-model:showDialog="showNewsImgUpload" :limit="1" :modelId="1" :isPublic="true" @getFileList="insertImage" :isToJpg="true"></FilesUpload>
    <FilesUpload v-if="showNewsFileUpload" v-model:showDialog="showNewsFileUpload" :limit="1" allow=".pdf" :isPublic="true" @getFileList="handleGetFiles"></FilesUpload>

  </div>
</template>

<script setup>
import { defineProps, ref, defineEmits, onMounted, reactive, computed, watch } from 'vue'
import { singleUpload } from '@/utils/upload'
import { useStore } from 'vuex'
import { Delete, Select, CloseBold, Edit } from '@element-plus/icons-vue'
import { ElMessage, ElLoading } from 'element-plus'
import draggable from 'vuedraggable'
import dayjs from 'dayjs'
import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
import ArticlePublishEdit from '@/components/stationContentChildren/ArticlePublishEdit'
//引入样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
// pdf读取
import * as pdfjsLib from 'pdfjs-dist'
import { FilesUpload } from "@ruifox-cms/components"
pdfjsLib.GlobalWorkerOptions.workerSrc = process.env.NODE_ENV === 'production' ? `${location.origin}/${location.pathname.split('/')[1]}/pdfjs-worker/pdf.worker.min.js` : `${location.origin}/pdfjs-worker/pdf.worker.min.js`

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  field: {
    type: String,
    default: ''
  },
  required: {
    type: Boolean,
    default: false
  },
  children: {
    type: Array,
    default: () => []
  },
  childrenShow: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:value'])
const store = useStore()
const newspapers = ref([])
watch(() => props.value, val => {
  newspapers.value = JSON.parse(val)
}, { deep: true, once: true })
watch(newspapers, val => {
  emits('update:value', JSON.stringify(val))
}, { deep: true })
const textRule = ref([])
const validateText = (rule, value, callback) => {
  if (!value) {
    callback(new Error(props.title + '不能为空'))
  } else {
    callback()
  }
}
const currentNewsId = ref(0) // 当前版次的文章id（index）
const currentNews = ref({}) // 当前版次

const currentNewsArticles = ref([])
const showNewsImgUpload = ref(false)
const showNewsFileUpload = ref(false)
const handleAddNews = (type) => {
  currentNews.value = {}
  if (type === 'image') {
    showNewsImgUpload.value = true
  } else if (type === 'pdf') {
    showNewsFileUpload.value = true
  }
}
const handleEditNews = (data, index) => {
  currentNewsId.value = index
  currentNews.value = JSON.parse(JSON.stringify(data))
  showNewsEditor.value = true
  // 文章查询
  searchArticles()
}
const handleDeleteNews = (data, index) => {
  newspapers.value.splice(index, 1)
}
const articleListLoading = ref(false)
const searchArticles = () => {
  if (currentNews.value.article) {
    currentNewsArticles.value = currentNews.value.article
  }
}
const insertImage = imgList => {
  // 判断是否为{}
  if (Object.keys(currentNews.value).length > 0) {
    currentNews.value.url = imgList[0].url
    currentNews.value.title = imgList[0].name
  } else {
    let _news = {
      title: imgList[0].name,
      url: imgList[0].url,
      fileUrl: '',
      article: []
    }
    currentNewsArticles.value = []
    newspapers.value.push(_news)
    currentNews.value = JSON.parse(JSON.stringify(newspapers.value[newspapers.value.length - 1]))
    currentNewsId.value = newspapers.value.length - 1
  }
  showNewsEditor.value = true
}
// pdf添加
const singleActionUrl = ref(store.state.content.singleActionUrl)
const handleGetFiles = async (files) => {
  if (!files || files.length === 0) return
  
  const loading = ElLoading.service({
    lock: true,
    text: 'PDF处理中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  try {
    const pdfFile = files[0]
    const fileUrl = pdfFile.url
    
    // 获取PDF文件内容
    const response = await fetch(fileUrl)
    const arrayBuffer = await response.arrayBuffer()
    
    // 加载PDF文档
    const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer })
    const pdf = await loadingTask.promise
    
    // 获取第一页
    const page = await pdf.getPage(1)
    
    // 设置缩放比例
    const desiredWidth = 1000
    const viewport = page.getViewport({ scale: 1.0 })
    const scale = desiredWidth / viewport.width
    const scaledViewport = page.getViewport({ scale })

    // 创建canvas
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    canvas.height = scaledViewport.height
    canvas.width = scaledViewport.width

    // 渲染PDF页面到canvas
    const renderContext = {
      canvasContext: context,
      viewport: scaledViewport,
      background: 'white'
    }

    await page.render(renderContext).promise

    // 上传图片
    const blob = await new Promise(resolve => {
      canvas.toBlob(resolve, 'image/jpeg', 0.9)
    })
    const file = new File([blob], `${pdfFile.name}.jpg`, { type: 'image/jpeg' })
    const formData = new FormData()
    formData.append('file', file)
    formData.append('cropWidth', canvas.width)
    formData.append('cropHeight', canvas.height)
    formData.append('scaledWidth', canvas.width)
    formData.append('scaledHeight', canvas.height)
    formData.append('startX', 0)
    formData.append('startY', 0)
    formData.append('path', 'content')
    formData.append('type', 0)
    const uploadRes = await singleUpload(formData, singleActionUrl.value)
    if (!uploadRes?.data?.url) {
      throw new Error('缩略图上传失败')
    }

    // 创建新的院报对象
    let _news = {
      title: pdfFile.name,
      url: uploadRes.data.url, // 使用上传后的URL
      fileUrl: fileUrl,
      article: []
    }

    currentNewsArticles.value = []
    newspapers.value.push(_news)
    currentNews.value = JSON.parse(JSON.stringify(newspapers.value[newspapers.value.length - 1]))
    currentNewsId.value = newspapers.value.length - 1
    showNewsEditor.value = true

  } catch (error) {
    console.error('PDF处理失败:', error)
    ElMessage({
      showClose: true,
      message: error.message || 'PDF处理失败，请重试',
      type: 'error'
    })
  } finally {
    loading.close()
  }
}

// const handleEditImg = (data) => {
//   console.log(data)
//   currentNews.value = JSON.parse(JSON.stringify(data))
//   showNewsImgUpload.value = true
// }

//修改版次文章
const showNewsEditor = ref(false)
// 区域划分
const canDraw = ref(true)
const state = reactive({
  isDrawing: false,
  startX: 0,
  startY: 0,
  currentX: 0,
  currentY: 0
})
const currentArea = reactive({
  top: 0,
  left: 0,
  width: 0,
  height: 0
})
const imageRef = ref(null)
const canvasRef = ref(null)
const currentArticles = computed(() => {
  return currentNews.value.article || []
})
const handleCloseNewsEditor = () => {
  canDraw.value = true
}
function handleMouseDown(event) {
  state.isDrawing = true
  const imageRect = imageRef.value.getBoundingClientRect()
  if (process.env.NODE_ENV === 'development') console.log(imageRect)
  state.startX = event.clientX - imageRect.left
  state.startY = event.clientY - imageRect.top
  state.currentX = state.startX
  state.currentY = state.startY
  canvasInit()
}
const handleConfirmDrag = () => {
  canDraw.value = true
  let _article = {
    title: '',
    content: '',
    coord: {
      x: currentArea.left,
      y: currentArea.top,
      w: currentArea.width,
      h: currentArea.height
    }
  }
  currentNews.value.article.push(_article)
}
const handleCancelDrag = () => {
  canDraw.value = true
}
function handleMouseMove(event) {
  if (state.isDrawing) {
    const imageRect = imageRef.value.getBoundingClientRect()
    const x = event.clientX - imageRect.left
    const y = event.clientY - imageRect.top
    if (x - state.startX >= 0 && y - state.startY) {
      state.currentX = x
      state.currentY = y
    }
    draw()
  }
}

function handleMouseUp() {
  if (state.isDrawing) {
    currentArea.top = state.startY
    currentArea.left = state.startX
    currentArea.width = Math.abs(state.currentX - state.startX)
    currentArea.height = Math.abs(state.currentY - state.startY)
    state.isDrawing = false
  }
  if (currentArea.width >= 90 && currentArea.height >= 60) {
    canDraw.value = false
  } else {
    ElMessage({
      showClose: true,
      message: '绘制宽高至少90*60（px）',
      type: 'error'
    })
  }
  clearCanvas()
}
function canvasInit() {
  const canvas = canvasRef.value
  const imageRect = imageRef.value.getBoundingClientRect()

  canvas.width = imageRect.width
  canvas.height = imageRect.height
}
function draw() {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')

  let themeColor = ref(getComputedStyle(document.documentElement).getPropertyValue(`--el-color-primary`))
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.strokeStyle = themeColor.value
  ctx.lineWidth = 2
  ctx.strokeRect(state.startX, state.startY, state.currentX - state.startX, state.currentY - state.startY)
}
function clearCanvas() {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')

  ctx.clearRect(0, 0, canvas.width, canvas.height)
}
const handleDragStop = (x, y) => {
  currentArea.top = y
  currentArea.left = x
}
const handleResizeStop = (x, y, width, height) => {
  if (process.env.NODE_ENV === 'development') console.log(x, y, width, height)
  currentArea.width = width
  currentArea.height = height
  currentArea.top = y
  currentArea.left = x
}

// 删除版次框选区域
const handleDeleteArea = index => {
  currentNews.value.article.splice(index, 1)
  currentNewsArticles.value = currentNews.value.article
}
// 管理章列表
const isShowArticleEdit = ref(false)
// 添加 or 修改
const isEdit = ref(false)
const articleFormDefault = {
  title: '',
  content: ''
}
//添加，修改文章表单校验规则
// const validateContent = (rule, value, callback) => {
//   if (value.length === 0) {
//     callback(new Error('文章内容不能为空'));
//   } else {
//     callback();
//   }
// }
// const articleFormRules = reactive({
//   title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }],
//   content: [{ required: true, validator: validateContent, trigger: 'blur' }]
// })
const resetForm = () => {
  const formRef = articleFormRef.value
  if (formRef) {
    formRef.clearValidate()
  }
}
const articleForm = reactive(Object.assign({}, articleFormDefault))
const articleFormRef = ref()
// 添加文章
const currentArticle = ref(0)
const handleAddArticle = index => {
  currentArticle.value = index
  isEdit.value = false
  Object.assign(articleForm, articleFormDefault)
  isShowArticleEdit.value = true
}
const submitLoading = ref(false)
const handleSubmitArticle = async () => {
  let valid = articleForm.title && articleForm.title != '' && articleForm.content && articleForm.content != ''

  if (!valid) {
    ElMessage({
      showClose: true,
      message: '请填写标题和内容!',
      type: 'warning'
    })
    return
  }

  const now = dayjs().format('YYYY-MM-DD HH:mm:ss')

  if (isEdit.value) {
    // 更新现有文章
    Object.assign(currentNews.value.article[currentArticle.value], {
      title: articleForm.title,
      content: articleForm.content,
      update_time: now
    })
    ElMessage({
      showClose: true,
      message: '修改成功',
      type: 'success'
    })
  } else {
    // 添加新文章
    Object.assign(currentNews.value.article[currentArticle.value], {
      title: articleForm.title,
      content: articleForm.content,
      create_time: now,
      update_time: now
    })
    ElMessage({
      showClose: true,
      message: '添加成功',
      type: 'success'
    })
  }
  
  // 更新文章列表
  currentNewsArticles.value = currentNews.value.article
  isShowArticleEdit.value = false
}
const handleEditArticle = data => {
  if (data.coord) {
    // 从区域点击进入
    currentArticle.value = currentNews.value.article.findIndex(item => item === data)
    Object.assign(articleForm, data)
  } else {
    // 从列表点击进入
    currentArticle.value = currentNews.value.article.findIndex(item => item === data)
    Object.assign(articleForm, data)
  }
  isEdit.value = true
  isShowArticleEdit.value = true
}
// 删除文章
const handleDeleteArticle = data => {
  const index = currentNews.value.article.findIndex(item => item === data)
  if (index > -1) {
    currentNews.value.article.splice(index, 1)
    currentNewsArticles.value = currentNews.value.article
  }
}
// 版次保存
const confirmNewsEdit = () => {
  newspapers.value[currentNewsId.value] = currentNews.value
  showNewsEditor.value = false
}
// 添加PDF预览方法
const handlePreviewPdf = (news) => {
  if (news.fileUrl) {
    window.open(news.fileUrl, '_blank')
  }
}
onMounted(() => {
  if (props.required) {
    textRule.value.push({ validator: validateText, trigger: 'blur' })
  }
})
</script>

<style scoped lang="scss">
.ele-newspaper-item {
  height: 120px;
  width: 100%;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  .no-data {
    box-sizing: border-box;
    cursor: pointer;
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    i {
      font-size: 43px;
      color: $hoverColor;
      margin-bottom: 5px;
    }
    p {
      margin-top: 5px;
      font-size: 14px;
      color: $mainColor;
    }
  }
  .add-btn {
    width: 200px;
  }
  .inner-newspaper-item {
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .img-box {
      position: relative;
      height: 80px;
      width: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border: 1px solid #e4e4e4;
      background-color: #f8f8f8;
      img {
        max-height: 100%;
        max-width: 100%;
      }
      .pdf-tag {
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(var(--el-color-primary-rgb), 0.9);
        color: #fff;
        padding: 2px 4px;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 2px;
        
        i {
          font-size: 14px;
        }
      }
    }
    .message-box {
      width: 640px;
      height: 80px;
      .message-box-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        p {
          font-size: 14px;
          color: #aaaaaa;
        }
        .newspaper-item-options {
          display: flex;
          .drag-btn {
            display: flex;
            box-sizing: border-box;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            height: 32px;
            width: 32px;
            margin-right: 10px;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
            i {
              color: #606266;
              font-size: 28px;
            }
          }
        }
      }
    }
  }
}
.ele-newspaper-item + .ele-newspaper-item {
  margin-top: 10px;
}
.add-newspaper-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
::v-deep(.news-editor .el-dialog__body) {
  padding: 0;
  background-color: #f8f8f8;
}
.news-editor-content {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  .news-img-box {
    width: 540px;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    .inner-news-img-box {
      position: relative;
      width: 520px;
      height: max-content;
      .canvas-box {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 2;
      }
      .draggable-box {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }
      .article-list {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        .article-item {
          position: absolute;
          background-color: rgba(var(--el-color-primary-rgb), 0.5);
          .article-box {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            ::v-deep(.el-button--small) {
              padding: 5px;
              z-index: 3;
            }
            .article-option-btn {
              display: flex;
              flex-direction: row-reverse;
              padding: 4px;
            }
            .article-content {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              p {
                font-size: 14px;
                color: #fff;
                @include textEllipsis(14px, 2);
                text-shadow: $mainColor 0 0 5px;
              }
            }
          }
        }
      }
    }
    img {
      width: 520px;
      height: auto;
      display: block;
    }
    .area {
      position: absolute;
      border: 1px solid $mainColor;
      background-color: $checkColor;
      pointer-events: none;
    }
    .canvas {
      pointer-events: none;
    }
  }
  .news-message-box {
    width: 580px;
    display: flex;
    flex-direction: column;
    .article-list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;
      color: #2b2c2e;
      .pdf-info {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--el-color-primary);
        cursor: pointer;
        i {
          font-size: 16px;
        }
      }
    }
    .article-list-box {
      width: 100%;
      flex: 1;
      background-color: $white;
      box-sizing: border-box;
      border: 1px solid #e4e4e4;
      .no-data {
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      .inner-article-list-box {
        height: 250px;
        overflow-y: scroll;
        .article-item {
          height: 50px;
          width: 100%;
          border-bottom: 1px solid #e4e4e4;
          display: flex;
          align-items: center;
          font-size: 14px;
          p {
            padding: 0 10px;
            width: 340px;
            box-sizing: border-box;
            font-size: 14px;
            @include textEllipsis(14px, 1);
          }
          span {
            display: block;
            width: 130px;
          }
          .article-btn-box {
            display: flex;
            margin-left: 10px;
            .el-button {
              padding: 5px;
            }
            .el-button + .el-button {
              margin-left: 0;
            }
          }
        }
      }
    }
  }
}
.draggable-class {
  background-color: rgba(var(--el-color-primary-rgb), 0.5);
  border: 1px solid $mainColor;
  position: absolute;
  .inner-drag {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
